{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <h1>{{ heading_title }}</h1>
      <ol class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
          <li class="breadcrumb-item"><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ol>
    </div>
  </div>
  <div class="container-fluid">
    {% if error_warning %}
      <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    {% endif %}
    {% if success %}
      <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    {% endif %}
    <div class="card">
      <div class="card-header"><i class="fas fa-file-export"></i> {{ text_export }}</div>
      <div class="card-body">
        <form id="form-export" method="post" action="{{ export }}" class="form-horizontal">
          <div class="row mb-3">
            <div class="col">
              <button type="submit" id="button-export" class="btn btn-primary"><i class="fas fa-upload"></i> {{ button_export }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
    <div class="card">
      <div class="card-header"><i class="fas fa-file-import"></i> {{ text_import }}</div>
      <div class="card-body">
        <form id="form-import" method="post" enctype="multipart/form-data" class="form-horizontal">
          <div class="row mb-3">
            <label class="col-sm-2 col-form-label">{{ text_import_info }}</label>
            <div class="col-sm-10">
              <input type="file" name="file" id="input-import-file" class="form-control" accept=".csv" />
              <input type="hidden" name="user_token" value="{{ user_token }}" />
            </div>
          </div>
          <div class="row mb-3">
            <div class="col-sm-10 offset-sm-2">
              <button type="submit" id="button-import" class="btn btn-primary"><i class="fas fa-download"></i> {{ button_import }}</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
$('#form-export').on('submit', function(e) {
    e.preventDefault();
    window.location.href = '{{ export }}';
});

$('#form-import').on('submit', function(e) {
    e.preventDefault();
    
    var formData = new FormData(this);
    
    $.ajax({
        url: 'index.php?route=catalog/product_import_export|import&user_token={{ user_token }}',
        type: 'post',
        data: formData,
        dataType: 'json',
        cache: false,
        contentType: false,
        processData: false,
        beforeSend: function() {
            $('#button-import').prop('disabled', true).html('<i class="fas fa-circle-notch fa-spin"></i> Importing...');
        },
        complete: function() {
            $('#button-import').prop('disabled', false).html('<i class="fas fa-download"></i> {{ button_import }}');
        },
        success: function(json) {
            $('.alert-dismissible').remove();

            if (json['error']) {
                $('#content > .container-fluid').prepend('<div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> ' + json['error'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
            }
            
            if (json['success']) {
                $('#content > .container-fluid').prepend('<div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> ' + json['success'] + ' <button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>');
                $('#input-import-file').val('');
            }
        },
        error: function(xhr, ajaxOptions, thrownError) {
            console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
        }
    });
});
</script>
